<!--
  Generated template for the HouseDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-grid>
    <ion-row>
      <ion-col col-4>
        <ion-icon name="arrow-back" style="font-size: 30px;margin-top: 15px" (click)="back()"></ion-icon>
      </ion-col>
      <ion-col col-4>
        <h4>房屋详情</h4>
      </ion-col>

    </ion-row>
  </ion-grid>


</ion-header>
<ion-content padding no-lines="true">
  <ion-item>
    <ion-slides loop="true" autoplay="2000"  (ionSlideDidChange)="slideChanged()" #slides>
      <ion-slide *ngFor="let item of imgs">
        <img src="assets/images/{{item}}" alt="" (click)="showImg(item)">
      </ion-slide>
    </ion-slides>
  </ion-item>

  <!--房源图片及名称———————————————————————————————————————-->
  <ion-item no-lines="true">
    <span style="font-size: 18px"><strong>{{house?.houseName}}</strong></span>
  </ion-item>
  <!--卡片1，房屋详情————————————————————————————————————————-->
  <ion-card class="card01">
    <ion-item class="basicInfo">
      <ion-grid>
        <ion-row class="line01">
          <ion-col col-lg-4>租金</ion-col>
          <ion-col col-lg-4>户型</ion-col>
          <ion-col col-lg-4>面积</ion-col>
        </ion-row>
        <ion-row class="line02">
          <ion-col col-lg-4>{{house?.housePrice}}元/月</ion-col>
          <ion-col col-lg-4>{{house?.room}}室{{house?.livingroom}}厅</ion-col>
          <ion-col col-lg-4>{{house?.area}}平方</ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <hr>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col col-md-6>单价：21948元/平</ion-col>
          <ion-col col-md-6>房贷计算器
            <ion-icon name="calculator"></ion-icon>
            <ion-icon name="arrow-dropright"></ion-icon>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-md-6>厨房：{{house?.kitchen}}间</ion-col>
          <ion-col col-md-6>卫生间：{{house?.bathroom}}间</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-md-6>阳台：{{house?.balcony}}个</ion-col>
          <ion-col col-md-6>朝向：{{house?.aspect}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-md-6>类型：住宅</ion-col>
          <ion-col col-md-6>楼层：{{house?.floor}}层</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-md-6>电梯：有</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12>上架时间：{{house?.publishTime.slice(0,10)}}</ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
  <!--卡片2，小区简介————————————————————————————————————————-->
  <ion-card class="card02">
    <ion-item>
      <span style="font-size: 23px"><strong>{{house?.areaName}}</strong></span>
      <!--<ion-icon name="arrow-dropright"></ion-icon>-->
      <ion-grid>
        <ion-row style="font-size: 15px;color: grey">
          <ion-col col-md-6>地址：</ion-col>
        </ion-row>
        <ion-row style="font-size: 20px">
          <ion-col col-sm-9>{{house?.address}}</ion-col>
        </ion-row>
      </ion-grid>
      <button ion-button full>查看小区在售房源</button>
    </ion-item>
  </ion-card>
  <!--卡片3，业主信息——————————————————————————————————-->
  <ion-card class="card03">
    <ion-item>
      <span style="font-size: 23px"><strong>业主信息</strong></span>
      <ion-item>
        <ion-avatar item-start>
          <img src="../../assets/images/4.jpg" height="150" width="200"/>
        </ion-avatar>
        <h1>{{house?.ownerName}}</h1>
        <p>个性签名：{{house?.personInfo}}</p>
      </ion-item></ion-item>
    <ion-card-content>
      <ion-list>
        <!--<ion-item>-->
          <!--<ion-icon name="mail"></ion-icon>:{{house?.address}}-->
        <!--</ion-item>-->
        <ion-item>
          <ion-icon name="phone-portrait"></ion-icon>:{{house?.telphone}}
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
  <!--卡片4，客户看房评价--------------------------------------------------------->
  <ion-card class="card04">
    <ion-item (click)="toEvaluation()">
      <span style="font-size: 23px"><strong>看房评价</strong></span>
      <ion-icon name="arrow-forward" item-end></ion-icon>
      <ion-item icon-end>
        共<span class="red">{{usersLength}}</span>位看房客户评价
      </ion-item>

    </ion-item>
  </ion-card>

  <!--<div>-->
    <div class="left"  (click)="collect()" ><span id="shou">收藏此房</span></div>
    <div class="right" (click)="kanfang()" ><span id="kan">我要看房</span></div>
  <!--</div>-->



</ion-content>
